<template>
    <div class="card-waic">
        <div class="main_left_header flex">
            <slot></slot>
            <div class="flex ac">
                <i @click="showActiveStar" class="iconfont iconxingxing2" :style="{ color: isStar ? '#f5d923' : '#ccc' }"></i>
                <div class="bcBlue" @click="$emit('add')">
                    <slot name="icon"></slot>
                </div>
            </div>
        </div>
        <el-input class="input_seek" placeholder="请输入内容" prefix-icon="el-icon-search" v-model="params.Keyword" @change="changeinput"> </el-input>
        <gg-scroll :downState.sync="downState" viewNode="" ref="scroll" @onscroll="onscroll" @onpullingDown="onpullingDown" @onpullingup="onpullingup" :showPullup.sync="showPullup">
            <div class="card_item flex" :id="'item' + i" v-for="(item, i) in list" :key="i" @click="clickCard(i, item)" :class="index == i ? 'checked' : ''">
                <div class="imge" v-if="item[range_img]">
                    <el-image :src="item[range_img] | ImgFilter" v-viewer>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
                <div class="card_desc">
                    <el-tooltip effect="dark" :content="item[range_name]" placement="top-start">
                        <div>
                            <span v-if="item[range_new]" class="isNew">新</span>
                            <span class="name e1">{{ item[range_name] }} </span>
                            <gg-bg-state v-if="item[range_stateName]" :state="item[range_state] || 2" height="16rem">{{ item[range_stateName] }}</gg-bg-state>
                        </div>
                    </el-tooltip>

                    <el-tooltip effect="dark" :content="range_message1 ? item[range_message] + '-' + item[range_message1] : item[range_message]" placement="bottom-start">
                        <div>{{ range_message1 ? item[range_message] + '-' + item[range_message1] : item[range_message] }}</div>
                    </el-tooltip>
                </div>
                <div class="deta">
                    <div>{{ item[range_time] | dateFilter(dateFilter) }}</div>
                    <i class="iconfont iconxingxing2" @click.stop="collect(item.id, i)" :class="{ active: item.isStar }"></i>
                </div>
            </div>
        </gg-scroll>
    </div>
</template>

<script>
function jumpPage(that) {
    if (JSON.parse(sessionStorage.getItem('secondHeaderInfo')) && JSON.parse(sessionStorage.getItem('secondHeaderInfo')).queryName) {
        let queryName = JSON.parse(sessionStorage.getItem('secondHeaderInfo')).queryName
        let queryData = JSON.parse(sessionStorage.getItem('secondHeaderInfo')).selectId

        if (Array.isArray(queryData) && queryData.length == 0) {
            that[queryName] = 0
        } else {
            that[queryName] = queryData
        }
        sessionStorage.removeItem('secondHeaderInfo')
    }
}
// const defaultParams = {
//     Keyword: "",
//     MaxResultCount: 15,
//     SkipCount: 0,
//     TenantId: Number(localStorage.getItem("AbpTenantId")) ? Number(localStorage.getItem("AbpTenantId")) : "",
// };
import { getList, formDataParams, dynamicFormPage, pageParams } from '@/api/dynamicForm'
import { useRoutePath } from '@/utils/routePath'
export default {
    name: 'qg-session-star',
    props: {
        defaultList: {
            type: Array,
            default: () => []
        },
        range_state: {
            type: String,
            default: 'status'
        },
        range_new: {
            type: String,
            default: ''
        },
        range_stateName: {
            type: String,
            default: ''
        },
        range_img: {
            type: String,
            default: 'image'
        },
        range_name: {
            type: String,
            default: 'name'
        },
        range_message: {
            type: String,
            default: 'desc'
        },
        range_message1: {
            type: String,
            default: ''
        },
        range_time: {
            type: String,
            default: 'creationTime'
        },
        immediate: {
            type: Boolean,
            default: true
        },
        starApi: {
            type: String,
            default: 'api/TokenAuth/Authenticate'
        },
        api: {
            type: [Function, String],
            default: getList
        },
        dateFilter: {
            type: String,
            default: 'hh:mm'
        },
        formPath: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            list: [],
            // params: { ...defaultParams },
            params: { ...formDataParams(this.formPath, 10) },
            selectParams: {},
            isCarry: true,
            page: 0,
            totalCount: 0,
            inputSeek: '',
            index: 0,
            isStar: false,
            showPullup: false, //控制下拉文字显示
            downState: 0, //上拉状态值
            formObj: {}
            // pageCount:15,
        }
    },
    async mounted() {
        if (!this.immediate) return
        await this.dynamicFormPage()
        jumpPage(this.params)
        this.init()
    },
    methods: {
        async dynamicFormPage() {
            let { data } = await dynamicFormPage({ ...pageParams(useRoutePath(), 999), isAdd: true })
            let list = data.result.list || []
            this.formObj = list[0] || { formJson: {} }
            this.params.formName = this.formObj.formName
            return this.formObj
        },
        async init(e) {
            this.params.page.pageIndex = 1
            this.params = { ...this.params, ...e }
            await this.getList(false)
            if ((this.list[0] || {}).id) {
                this.clickCard(0, this.list[0])
            }
        },
        async getList(isPush = true) {
            // 用于查看页面效果
            if (this.defaultList.length) return (this.list = this.defaultList)
            let arr = []
            let res = {}
            if (this.api === getList) {
                let result = await getList(this.params)
                arr = result.list
                res = result
                arr = arr.map(v => {
                    return { ...v, ...v.formKeyValue }
                })
            } else if (typeof this.api === 'function') {
                let { result } = await this.api(this.params)
                arr = result.items
                res = result
            } else {
                let { result } = this.$req.get(this.api, this.params)
                arr = result.items
                res = result
            }
            console.log(arr, 'arr')
            this.totalCount = res.totalCount || 0
            if (isPush) {
                this.list.push(...(arr ? arr : res))
            } else {
                this.list = arr ? arr : res
            }
            this.$nextTick(() => {
                this.downState = 0
                this.showPullup = false
                this.$refs.scroll.betterS.finishPullUp()
                this.$refs.scroll.betterS.refresh()
            })
        },
        async collect(id, i) {
            let { success } = this.$req.post(this.starApi, { studentId: id })
            if (success) this.list[i].isStar = !this.list[i].isStar
        },
        showActiveStar() {
            this.isStar = !this.isStar
            this.getList(false)
        },
        changeinput(n) {
            this.getList(false)
        },

        clickCard(i, item) {
            this.index = i
            this.$emit('change', item)
        },
        async onscroll(res) {},
        async onscrollEnd(res) {},
        onpullingDown() {
            this.init(false)
        },
        async onpullingup() {
            this.params.page.pageIndex++
            if (this.list.length === this.totalCount) {
                this.showPullup = false
            } else {
                await this.getList()
            }
        }
    }
}
</script>

<style lang="less" scoped>
.main_left_header {
    justify-content: space-between;

    /deep/.el-input__inner {
        border: none;
    }

    cursor: pointer;
    align-items: center;

    div:nth-child(1) {
        // flex: 1.5;
        color: #000;
    }

    div:nth-child(2) {
        // flex: 1.5;
        margin-left: 10rem;
    }

    .bcBlue {
        width: 36rem;
        height: 36rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #7659ff;
        border-radius: 4rem;
        color: #fff;

        & > div {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.input_seek {
    margin: 17rem 0rem;
}

.checked {
    background-color: #f6f5fa !important;
}

.card-waic {
    height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card_item {
    background-color: #fff;
    height: 64rem;
    padding: 12rem;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;

    &:hover {
        background-color: #f6f5fa;
    }

    .imge {
        width: 40rem;
        height: 40rem;
        margin-right: 9rem;

        /deep/.el-image {
            width: 100%;
            height: 100%;

            .image-slot {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                i {
                    font-size: 30rem;
                }
            }
        }
    }

    .card_desc {
        // background-color: rgb(99, 98, 98);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 2;

        & > div:nth-child(1) {
            flex: 1;
            display: flex;

            & > .name {
                // width: 0;
                // flex: 1;
                max-width: 100rem;
                font-size: 14rem;
                margin-right: 10rem;
            }
        }

        & > div:nth-child(2) {
            font-size: 12rem;
            overflow: hidden;
            /*超出部分隐藏*/
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
            white-space: nowrap;
            /*规定段落中的文本不进行换行 */
            width: 100rem;
            color: #999999;
        }
    }

    .deta {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        font-size: 12rem;

        &.active {
            color: #f5d923;
        }

        i {
            color: #ccc;
        }
    }
}

.isNew {
    width: 20rem;
    height: 20rem;
    background-color: #f5434d;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 100%;
}
</style>
